<template>
  <div class="login_wrap">
    <div class="logo_wrap">
      <img src="../image/logo.png" alt="">
    </div>
    <div class="input_info">
      <div class="select_country" @click="selectArea">
        <div class="sel_left">
          <i class="iconfont icon-zhishiditu"></i>
          <span class="area">{{country}}</span>
        </div>
        <div class="sel_right">
          <span class="code">+{{code}}</span>
          <i class="iconfont icon-fanhui-copy"></i>
        </div>
      </div>
      <label for="phone" class="info phone">
        <i class="iconfont icon-msnui-tel"></i>
        <input type="number" id="phone" placeholder="Please enter your phone number" v-model="phone">
      </label>
      <label for="password" class="info pwd">
        <i class="iconfont icon-mima"></i>
        <input type="password" id="password" placeholder="Please input a password" v-model="password">
      </label>
      <div class="memory">
        <div class="left" @click="remember">
          <i class="iconfont" :class="{'icon-weixuanzhong': !isRemember, 'icon-xuanzhong1': isRemember}"></i>
          <span>Remember</span>
        </div>
        <span class="forget" @click="forgetPwd">Forget?</span>
      </div>
    </div>
    <div class="to_login">
      <span class="public_btn" @click="login">Sign in</span>
    </div>
    <!-- <div class="to_register">
      <span @click="register">Create an account</span>
    </div> -->
    <div class="lang_tab">
      <span class="lang_fir" :class="{'lang_act' : langType === 1}" @click="langTab(1)">Chinese</span>
      <span class="lang_sec" :class="{'lang_act' : langType === 2}" @click="langTab(2)">EN</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      country: 'China',
      code: '86',
      phone: '',
      password: '',
      isRemember: false,
      langType: 2
    };
  },
  mounted () {
    this.getStorageData();
    this.readPass();
  },
  methods: {
    remember () {
      this.isRemember = !this.isRemember;
    },
    login () {
      if (!this.phone) {
        this.Toast('Please enter cell phone number.');
      } else if (!this.password) {
        this.Toast('Please enter login password.');
      } else {
        this.passMemory();
        this.goLogin();
      }
    },
    // Remember the password
    passMemory () {
      if (this.isRemember) {
        let user = {};
        user.phone = this.phone;
        user.password = this.password;
        localStorage.memory = JSON.stringify(user);
      } else {
        localStorage.removeItem('memory');
      }
    },
    // Password reading
    readPass () {
      if (localStorage.memory) {
        const user = JSON.parse(localStorage.memory);
        this.phone = user.phone;
        this.password = user.password;
        this.isRemember = true;
      }
    },
    register () {
      this.$router.push('register');
    },
    forgetPwd () {
      this.$router.push('forgetPassword');
    },
    // Select country code
    selectArea () {
      this.$router.push('selectArea');
    },
    getStorageData () {
      if (localStorage.areaCode) {
        this.country = JSON.parse(localStorage.areaCode).country;
        this.code = JSON.parse(localStorage.areaCode).tel;
      }
    },
    // Choice of language
    langTab (num) {
      if (this.langType === num) {
        return false;
      } else {
        this.langType = num;
        if (this.langType === 1) {
          window.location.href = 'http://www.ytccchain.com';
        }
      }
      // if (num === 1) {
      //   this.langType = num;
      // }else {
      //   this.Toast('Not open to the outside world');
      // }
    },
    // Login request
    goLogin () {
      this.axios.post('index/auth/login', {
        phone: this.phone,
        password: this.password
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('Login success');
          this.$router.push('index');
          this.getPhone();
        } else if (data.status === 204) {
          this.Toast(data.message);
          this.$router.push('serviceCenter');
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Get cell phone number
    getPhone () {
      this.axios.get('index/users/mobile').then(({data}) => {
        if (data.status === 200) {
          this.$store.commit('getPhone', data.mobile);
        }
      });
    },
    // Getting user information
    getInfo () {
      this.axios.get('index/rename/rename').then(({data}) => {
        if (data.status === 200) {
          this.$store.commit('getName', data.data.username, data.data.account);
        } else {
          this.Toast(data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .login_wrap{
    padding: 108px 0 90px;
    background-color: #f5f5f5;
    .logo_wrap{
      width: 132px;
      height: 136px;
      margin: 0 auto 126px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .input_info{
      width: 100%;
      padding: 0 75px 140px;
      .select_country{
        width: 100%;
        padding-left: 36px;
        color: #282828;
        font-size: 26px;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        .sel_left{
          display: flex;
          align-items: center;
        }
        .iconfont{
          font-size: 30px;
          &.icon-zhishiditu{
            color: #423e3d;
            margin-right: 22px;
          }
        }
        .area{
          margin-right: 22px;
        }
        .code{
          margin-right: 20px;
        }
      }
      .info{
        width: 100%;
        height: 88px;
        border-radius: 44px;
        display: flex;
        align-items: center;
        padding-left: 40px;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        .iconfont{
          font-size: 36px;
          color: $color;
          margin-right: 30px;
        }
        input{
          flex: 1;
          height: 100%;
          line-height: 88px;
          font-size: 28px;
          color: #282828;
          &:placeholder{
            color: #999;
          }
        }
        &.phone{
          margin-bottom: 40px;
        }
        &.pwd{
          margin-bottom: 30px;
        }
      }
      .memory{
        width: 100%;
        padding: 0 36px;
        font-size: 26px;
        color: #666;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          .iconfont{
            font-size: 30px;
            color: $color;
            margin-right: 14px;
          }
        }
      }
    }
    .to_login{
      width: 100%;
      text-align: center;
      margin-bottom: 218px;
    }
    .to_register{
      width: 100%;
      text-align: center;
      font-size: 30px;
      color: $color;
      margin-bottom: 156px;
    }
    .lang_tab{
      width: 100%;
      // text-align: center;
      font-size: 26px;
      color: #999;
      position: relative;
      display: flex;
      .lang_fir{
        width: 50%;
        padding-left: 240px;
      }
      .lang_sec{
        width: 50%;
        padding-left: 50px;
      }
      .lang_act{
        color: #282828;
      }
      &::after{
        display: block;
        content: '';
        width: 1px;
        height: 24px;
        background-color: #999;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
</style>
